<template>
  <div style="height:100%;"></div>
</template>

<script>
import mockdata from "@/assets/data/page1/part2.json";

export default {
  name: "part2",
  data() {
    return {
      myChart: null,
      xData: [],
      yData: []
    }
  },
  methods: {
    setData() {
      // 组装数据
      for (let item of mockdata) {
        this.xData.push(item.area)
        this.yData.push(item.count)
      }
    },
    // 柱状图
    setChart() {

      let colorList = ['#2c7bfe', '#c2232a', '#feed2c', '#a262f2', '#62d5f2', '#fe672c', '#2c7bfe', '#69f262'];
      let option = {
        xAxis: {
          type: 'category',
          data: this.xData,
          axisLabel: {
            interval: 0,
            fontSize: 9,
            color: '#75deef'
          },
          axisLine: {show: false},
          axisTick: {
            show: false
          },
          name:'地区'
        },
        yAxis: {
          type: 'value',
          splitLine: {show: true},
          axisLabel: {show: true},
          axisLine: {show: true},
          axisTick: {
            show: false
          },
          name: "(个)",

        },
        series: [
          {
            data: this.yData,
            type: 'bar',
            visualMap: {
              show: false,
              dimension: 1,
              inRange: {
                color: colorList
              }
            },
            itemStyle: {
              color: function(params) {
                let index = Math.floor(Math.random() * (7 - 0 + 1)) + 0
                return colorList[index];

              }
            }
          }
        ]
      };

      if (!this.myChart) this.myChart = this.$echarts(this.$el);
      this.myChart.clear();
      this.myChart.resize();
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.setData()
    this.setChart();
  },
}
</script>

<style scoped>

</style>
